<template>
  <div>
    <el-table
      :data="count"
      v-loading="tableLoading"
      header-row-class-name="table-header"
      style="width: 100%"
      :header-cell-style="tableHeaderObj"
      :cell-style="tableBodyObj"
      stripe>
      <el-table-column
        prop="on_job_num"
        label="在职员工"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="full_time_num"
        label="全职"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="part_time_num"
        label="兼职"
        align="center">
      </el-table-column>
      <el-table-column
        prop="practice_num"
        label="实习"
        align="center">
      </el-table-column>
      <el-table-column
        prop="trial_num"
        label="试用"
        align="center">
      </el-table-column>
      <el-table-column
        prop="positive_num"
        label="转正"
        align="center">
      </el-table-column>
      <el-table-column
        prop="off_job_num"
        label="离职"
        align="center">
      </el-table-column>
    </el-table>
    <div class="hr-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="试用记录" name="first">
          <el-table
            :data="list"
            v-loading="tableLoading"
            header-row-class-name="table-header"
            style="width: 100%"
            :header-cell-style="tableHeaderObj"
            :cell-style="tableBodyTabObj"
            stripe>
            <el-table-column
              label="头像"
              width="100"
              align="center">
              <template slot-scope="scope">
                <img :src="scope.row.photo_url" alt="" style="width: 50px;height:50px;border-radius:50%;vertical-align: middle;">
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="job_num"
              label="工号"
							min-width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="company_name"
              label="隶属公司"
              width="240"
              align="center">
            </el-table-column>
            <el-table-column
              prop="department_name"
              label="部门"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="position"
              label="职位"
              align="center">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              label="入职时间"
              width="120"
              align="center">
              <template slot-scope="scope">
                <span>{{scope.row.entry_time | parseTime('{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="emptype_text"
              label="员工类型"
              align="center">
            </el-table-column>
            <el-table-column
              prop="status_text"
              label="状态"
              align="center">
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page['page']"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page['per-page']"
              layout="sizes, prev, pager, next, jumper"
              :total="totalPage">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="转正记录" name="second">
          <el-table
            :data="list"
            v-loading="tableLoading"
            header-row-class-name="table-header"
            style="width: 100%"
            :header-cell-style="tableHeaderObj"
            :cell-style="tableBodyTabObj"
            stripe>
            <el-table-column
              label="头像"
              width="100"
              align="center">
              <template slot-scope="scope">
                <img :src="scope.row.photo_url" alt="" style="width: 50px;vertical-align: middle;">
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="job_num"
              label="工号"
							min-width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="company_name"
              label="隶属公司"
              width="240"
              align="center">
            </el-table-column>
            <el-table-column
              prop="department_name"
              label="部门"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="position"
              label="职位"
              align="center">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              label="入职时间"
              width="120"
              align="center">
              <template slot-scope="scope">
                <span>{{scope.row.entry_time | parseTime('{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="emptype_text"
              label="员工类型"
              align="center">
            </el-table-column>
            <el-table-column
              prop="status_text"
              label="状态"
              align="center">
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page['page']"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page['per-page']"
              layout="sizes, prev, pager, next, jumper"
              :total="totalPage">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="离职记录" name="third">
          <el-table
            :data="list"
            v-loading="tableLoading"
            header-row-class-name="table-header"
            style="width: 100%"
            :header-cell-style="tableHeaderObj"
            :cell-style="tableBodyTabObj"
            stripe>
            <el-table-column
              label="头像"
              width="100"
              align="center">
              <template slot-scope="scope">
                <img :src="scope.row.photo_url" alt="" style="width: 50px;vertical-align: middle;">
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="job_num"
              label="工号"
							min-width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="company_name"
              label="隶属公司"
              width="240"
              align="center">
            </el-table-column>
            <el-table-column
              prop="department_name"
              label="部门"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="position"
              label="职位"
              align="center">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              label="入职时间"
              width="120"
              align="center">
              <template slot-scope="scope">
                <span>{{scope.row.entry_time | parseTime('{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="emptype_text"
              label="员工类型"
              align="center">
            </el-table-column>
            <el-table-column
              prop="status_text"
              label="状态"
              align="center">
            </el-table-column>
          </el-table>
          <el-row class="page pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page['page']"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page['per-page']"
              layout="sizes, prev, pager, next, jumper"
              :total="totalPage">
            </el-pagination>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style scoped>
.page {
  margin-top: 50px;
  text-align: center;
}
.el-pagination {
  font-weight: normal;
  margin: 0px auto;
}
.el-table {
  border-left: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
</style>
<style>
.hr-tab .el-tabs__nav-wrap::after {
  height: 0px;
}
.hr-tab .el-tabs__nav-scroll {
  text-align: center;
}
.hr-tab .el-tabs__nav {
  float: none;
}
.hr-tab .el-tabs__item {
  padding: 0px;
  margin: 0 30px;
}
.hr-tab .el-tabs__item.is-active {
  border-bottom: solid 2px #409EFF;
}
.hr-tab .el-tabs__active-bar {
  height: 0px;
}
.hr-tab .el-tabs__header {
  margin: 30px 0 20px;
}
</style>

<script>
import {getPersonList, personCount} from '@/api/hr'

export default {
  data() {
    return {
      count: [],
      list: [],
      activeName: 'first',
      tableLoading: false,
      totalPage: null,
      page: {
        'per-page': 20,
        page: 1,
        status: 1
      },
      tableHeaderObj: {
        'background-color': '#f5f7fa',
        'color': '#606266',
        'height': '68px'
      },
      tableBodyObj: {
        'color': '#303133',
        'font-size': '24px',
        'height': '68px'
      },
      tableBodyTabObj: {
        'height': '68px'
      }
    }
  },
  created() {
    this.personCount()
    this.initList()
  },
  methods: {
    personCount() {
      personCount().then((response) => {
        this.count.push(response.data)
      })
    },
    initList() {
			this.tableLoading = true
      getPersonList(this.page).then((response) => {
        this.list = response.data.data
        this.tableLoading = false
        this.totalPage = response.data._meta.totalCount
      })
    },
    handleClick(tab, event) {
      if (this.activeName === 'first') {
        this.page.status = 1
      }
      if (this.activeName === 'second') {
        this.page.status = 2
      }
      if (this.activeName === 'third') {
        this.page.status = 3
      }
      this.initList()
    },
    handleSizeChange(val) {
      this.page['per-page'] = val
      this.initList()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initList()
    }
  }
}
</script>
